<template>
  <div>
    <div class="alertBox" v-if="isAlert">
      <div class="cont">
        <div class="imgBox">
          <img :src="dateInfo.src" mode="widthFix" class="showImg" />
        </div>
        <div class="hint">
          <p>{{dateInfo.title}}</p>
          <span>{{dateInfo.label}}</span>
        </div>
        <button class="btn" @click="handleAffirm">确认</button>
        <div class="close" @click="closeAlert">
          <icon type="clear" size="28" color="#fff" />
        </div>
      </div>
      <div class="zz"></div>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {} from '@/api'

export default {
  components: {},
  props: {
    dateInfo: {
      type: Object,
      required: false,
      default: () => ({})
    },
    isAlert: { type: Boolean, required: false, default: false }
  },
  data () {
    return {
      isClcik: false
    }
  },
  computed: {},
  watch: {
    isClcik: {
      handler: function (val, oldVal) {
        if (val) {
          this.isAlert = true
        } else {
          this.isAlert = false
        }
      },
      deep: true
    }
  },
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    closeAlert () {
      this.isAlert = false
      this.isClcik = false
    },
    handleAffirm () {
      this.isClcik = false
      this.$emit('change', this.isClcik)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.alertBox {
  .cont {
    width: 320px;
    height: 360px;
    border: 2px solid #eee;
    border-radius: 6px;
    background: #fff;
    position: fixed;
    z-index: 21;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .imgBox {
      width: 100%;
      height: 210px;
      display: flex;
      align-items: center;
      justify-content: center;
      .showImg {
        width: 180px;
        height: 180px;
      }
    }
    .hint {
      p {
        font-size: 18px;
        color: #000;
        text-align: center;
        line-height: 25px;
      }
      span {
        font-size: 14px;
        color: #b6b6b6;
        text-align: center;
        line-height: 25px;
      }
    }
    .btn {
      width: 80%;
      height: 40px;
      line-height: 40px;
      border-radius: 25px;
      margin: auto;
      color: #fff;
      background: linear-gradient(to right, $new-dark-blue, $new-light-blue);
    }
    .close {
      position: absolute;
      z-index: 22;
      left: 50%;
      bottom: -20%;
      transform: translate(-50%, 0%);
    }
  }
  .zz {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
}
</style>
